"use client";

import { HStack, Tag, TagLabel, TagLeftIcon } from "@chakra-ui/react";
import { LuDatabase, LuGlobe, LuBookOpen } from "react-icons/lu";
import type { ToolSelection } from "@/lib/types";

const TOOLS: {
  id: ToolSelection;
  label: string;
  icon: typeof LuDatabase;
}[] = [
  { id: "eugene", label: "Eugene KG", icon: LuDatabase },
  { id: "http", label: "Web", icon: LuGlobe },
  { id: "pubmed", label: "PubMed", icon: LuBookOpen },
];

interface Props {
  value: ToolSelection[];
  onChange: (next: ToolSelection[]) => void;
}

export function ToolChips({ value, onChange }: Props) {
  const toggle = (id: ToolSelection) => {
    onChange(value.includes(id) ? value.filter((x) => x !== id) : [...value, id]);
  };
  return (
    <HStack spacing={2} flexWrap="wrap">
      {TOOLS.map((t) => {
        const active = value.includes(t.id);
        return (
          <Tag
            key={t.id}
            as="button"
            onClick={() => toggle(t.id)}
            variant={active ? "solid" : "subtle"}
            colorScheme={active ? "accent" : "gray"}
            bg={active ? "accent.500" : "whiteAlpha.100"}
            color={active ? "white" : "text.muted"}
            borderRadius="full"
            px={3}
            py={1}
            fontSize="xs"
            cursor="pointer"
            _hover={{ opacity: 0.85 }}
            transition="all 120ms ease"
          >
            <TagLeftIcon as={t.icon} boxSize={3.5} />
            <TagLabel>{t.label}</TagLabel>
          </Tag>
        );
      })}
    </HStack>
  );
}
